import { Form, Input, Button, Typography, Select } from "antd";
import { isMobile } from "../constants/isMobile";
import { useRecoilValue } from "recoil";
import { IChangedValuesType, IRegisterFormProps, ItemsTypeArray, ISiteInfo } from "../interface";
import { siteInfo } from "../recoil/atoms/siteInfo";

interface IFormInformationProps {
  onFinish: (values: IRegisterFormProps) => void;
  labelCol: number;
  wrapperCol: number;
  onValuesChange: (changedValues: IChangedValuesType, allValues: IRegisterFormProps) => void;
  disable: boolean;
  formValidation: ItemsTypeArray[];
}

const { Option } = Select;

export default function FormInformation(props: IFormInformationProps) {
  const {
    onFinish,
    formValidation,
    labelCol,
    wrapperCol,
    onValuesChange,
    disable,
  } = props;
  const { Title } = Typography;

  // 从recoil中拿到网站信息
  const siteBasicInfo = useRecoilValue<ISiteInfo>(siteInfo);

  return (
    <div>
      <Title level={3} className="text-center font-semibold text-2xl py-4">
        面试信息
      </Title>
      <Form
        name="basic"
        labelCol={{ span: labelCol }}
        wrapperCol={{ span: wrapperCol }}
        onFinish={onFinish}
        autoComplete="off"
        onValuesChange={onValuesChange}
      >
        {formValidation.map((num: ItemsTypeArray, index: number) => {
          return (
            <Form.Item
              key={index}
              name={num.name}
              label={!isMobile() && num.label}
              rules={num.rule}
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 19 }}
              className="sm:mb-4"
            >
              <Input
                placeholder={num.placeholder}
                prefix={num.icon.prefix}
                className="min-w-min border-t-0 border-x-0 border-b-2 border-b-rose-300 "
              />
            </Form.Item>
          );
        })}
        <Form.Item name="job" label={!isMobile() && '岗位'} rules={[{ required: true, message: "请选择岗位!" }]} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
          <Select
            placeholder="请选择你要面试的岗位"
            bordered={false}
            className="border-t-0 border-x-0 border-b-2 border-b-rose-300"
          >
            {siteBasicInfo.tag?.map(item => <Option value={item} key={item}>{item}</Option>)}
          </Select>
        </Form.Item>
        <Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: "center" }}>
          <Button type="primary" htmlType="submit" disabled={disable}>
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
